<template>
    <div>
        <el-button type="primary" @click="newChallengeDialogVisible = true">{{$t('challenge.new')}}</el-button>
        <el-table :data="challengeList" style="width: 100%" stripe v-loading="isLoading">
            <el-table-column width="80" prop="ID" label="ID"/>
            <el-table-column prop="Title" :label="$t('challenge.title')"/>
            <el-table-column prop="BaseScore" :label="$t('challenge.base_score')"/>
            <el-table-column prop="Visible" :label="$t('challenge.visible')">
                <template v-slot="scope">{{scope.row.Visible}}</template>
            </el-table-column>
            <el-table-column prop="AutoRefreshFlag" :label="$t('challenge.auto_refresh_flag')">
                <template v-slot="scope">{{scope.row.AutoRefreshFlag}}</template>
            </el-table-column>
            <el-table-column prop="Command" :label="$t('challenge.command')"/>
            <el-table-column :label="$t('general.create_at')" width="200"
                             :formatter="(row)=>utils.FormatGoTime(row.CreatedAt)"/>
            <el-table-column :label="$t('general.operate')" width="300">
                <template v-slot="scope">
                    <el-popconfirm
                            :title="scope.row.Visible ? $t('challenge.invisible_title') : $t('challenge.visible_title')"
                            @confirm="handleVisible(scope.row.ID, !scope.row.Visible)">
                            <template #reference>
                        <el-button plain size="small">{{$t('challenge.set_visible')}}</el-button>
                            </template>
                    </el-popconfirm>
                    <el-button
                            size="small"
                            @click="()=>{Object.assign(editChallengeForm, JSON.parse(JSON.stringify(scope.row))); editChallengeDialogVisible = true}">
                        {{$t('general.edit')}}
                    </el-button>
                    <el-popconfirm
                            :confirmButtonText="$t('general.confirm_cancel')"
                            :cancelButtonText="$t('general.cancel')"
                            icon="el-icon-info"
                            iconColor="red"
                            :title="$t('challenge.delete_title')"
                            @confirm="handleDelete(scope.row)"
                    >
                    <template #reference>
                        <el-button size="small" type="danger">{{$t('general.delete')}}
                        </el-button>
                    </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- New Challenge -->
        <el-dialog :title="$t('challenge.publish')" v-model="newChallengeDialogVisible">
            <el-form :model="newChallengeForm" label-width="120px">
                <el-form-item :label="$t('challenge.title')">
                    <el-input v-model="newChallengeForm.Title"/>
                </el-form-item>
                <el-form-item :label="$t('challenge.base_score')">
                    <el-input-number v-model="newChallengeForm.BaseScore" :min="1"/>
                </el-form-item>
                <el-form-item :label="$t('challenge.auto_refresh_flag')">
                    <el-switch v-model="newChallengeForm.AutoRefreshFlag"></el-switch>
                </el-form-item>
                <el-form-item :label="$t('challenge.command')" v-if="newChallengeForm.AutoRefreshFlag">
                    <el-input v-model="newChallengeForm.Command"/>
                    <span>{{$t('challenge.flag_placeholder')}}<code v-pre>{{FLAG}}</code></span>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="onNewChallenge">{{$t('challenge.publish')}}</el-button>
        </el-dialog>

        <!-- Edit Challenge -->
        <el-dialog :title="$t('challenge.edit')" v-model="editChallengeDialogVisible">
            <el-form :model="editChallengeForm" label-width="120px">
                <el-form-item :label="$t('challenge.title')">
                    <el-input v-model="editChallengeForm.Title"/>
                </el-form-item>
                <el-form-item :label="$t('challenge.base_score')">
                    <el-input-number v-model="editChallengeForm.BaseScore" :min="1"/>
                </el-form-item>
                <el-form-item :label="$t('challenge.auto_refresh_flag')">
                    <el-switch v-model="editChallengeForm.AutoRefreshFlag"></el-switch>
                </el-form-item>
                <el-form-item :label="$t('challenge.command')" v-if="editChallengeForm.AutoRefreshFlag">
                    <el-input v-model="editChallengeForm.Command"/>
                    <span>{{$t('challenge.flag_placeholder')}}<code v-pre>{{FLAG}}</code></span>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="onEditChallenge">{{$t('challenge.edit')}}</el-button>
        </el-dialog>

    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { getCurrentInstance } from 'vue';
import utils from '@/utils.js'
const { proxy } = getCurrentInstance();
const isLoading = ref(true)
const challengeList = ref(null)
const newChallengeDialogVisible = ref(false)
const editChallengeDialogVisible = ref(false)

const newChallengeForm = reactive({
                    Title: '',
                    BaseScore: 1000,
                    AutoRefreshFlag: false,
                    Command: 'echo {{FLAG}} > /flag',
                })

const editChallengeForm = reactive({
                    Title: '',
                    BaseScore: 1000,
                    AutoRefreshFlag: false,
                    Command: '',
                })

onMounted(() => {
            getChallenges()
        })

        
function getChallenges() {
                utils.GET("/manager/challenges").then(res => {
                    challengeList.value = res
                    isLoading.value = false
                }).catch(err => proxy.$message.error(err))
            }

function onNewChallenge() {
                utils.POST('/manager/challenge', newChallengeForm).then(res => {
                    newChallengeDialogVisible.value = false
                    // 清空表单
                    Object.assign(newChallengeForm, {
                        Title: '',
                        BaseScore: 1000,
                        AutoRefreshFlag: false,
                        Command: 'echo {{FLAG}} > /flag',
                    })
                    getChallenges()
                    proxy.$message({message: res, type: 'success'})
                }).catch(err => proxy.$message({message: err, type: 'error'}))
            }

function onEditChallenge() {
                utils.PUT('/manager/challenge', editChallengeForm).then(res => {
                    editChallengeDialogVisible.value = false
                    getChallenges()
                    proxy.$message({message: res, type: 'success'})
                }).catch(err => proxy.$message({message: err, type: 'error'}))
            }

function handleDelete(row) {
                utils.DELETE("/manager/challenge?id=" + row.ID).then(res => {
                    proxy.$message({
                        message: res,
                        type: 'success'
                    });
                    getChallenges()
                }).catch(err => proxy.$message({message: err, type: 'error'}))
            }

function handleVisible(id, visible) {
                utils.POST("/manager/challenge/visible", {
                    ID: id,
                    Visible: visible
                }).then(res => {
                    proxy.$message({
                        message: res,
                        type: 'success'
                    });
                    getChallenges()
                }).catch(err => proxy.$message({message: err, type: 'error'}))
            }
</script>

<style scoped>

</style>
